<template>
  <div class="login-page">

    <img class="login-banner" src="../../assets/img/ad.jpg" alt="">
    <div class="operation">
      <span class="login_checked" >忘记密码</span>
    </div>
    <div class="login-register">
      <div class="input-item">
        <span class="star">*</span>
        <span>郵箱</span>
        <input type="email" v-model="email" placeholder="请输入手机号">
      </div>
      <div class="input-item">
        <span class="star">*</span>
        <span>新密碼</span>
        <input type="password" v-model="password" placeholder="请输入密码">
      </div>
      <div class="input-item">
        <span class="star">*</span>
        <span id="msg-code">郵箱驗證碼</span>
        <input type="text" v-model="msg_code" placeholder="请输入短信验证码">
        <div class="get-code-btn">獲取驗證碼</div>
      </div>
      <router-link to="/">
        <div class="back-login">返回登錄</div>
      </router-link>

      <div class="btn">
        <mt-button type="primary" class="login-submit" :style="{marginTop:'64px'}">重置密碼</mt-button>
      </div>
    </div>
  </div>
</template>

<style scoped>

  .btn{
    width: 100%;
    height: 46px;
    text-align: center;
  }
  .back-login{
    font-size: 12px;
    width: 48px;
    height: 12px;
    color:#FF0000;
    float: right;
    margin: 0 auto;
    font-weight: normal;
  }
  .get-code-btn{
    width:89px;
    height:34px;
    text-align:center;
    line-height:34px;
    color:#409EFF;
    background:#B3D8FF;
    margin-left:10px;
    cursor: pointer;
    font-size:11px;
    font-weight:normal;
  }
  .login-submit{
    width:92%;
    height:46px;
    margin-top:26px;
    background: #409EFF;
    color:#FFFFFF;

    font-size:16px;
    font-weight: bold;
  }
  /*.login-register{*/
  /*  margin-top:64px;*/
  /*}*/
  .login-register{
    padding-top:16px;
    color:#FF0000;
    font-size:12px;
    font-weight: normal;
    float:right;
  }
  .login-register .input-item .star{
    color:#F56C6C;
    margin-right:6px;
    margin-top:2px;
  }
  .login-register .input-item span:nth-child(2){
    width:42px;
    margin-right:11px;
  }
  .login-register .input-item #msg-code{
    width:80px;
  }
  .login-register .input-item .yzm{
    width:65px;
    height:34px;
    padding-left:10px;
    padding-right:24px;

  }
  .login-register{
    font-size:14px;
    padding:19px 15px 0;
    font-weight:bold;
    color:rgba(31,31,31,1);
  }
  .login-register .input-item{
    margin-bottom:10px;
    display:flex;
    align-items: center;
    height:36px;
  }
  .login-register .input-item input{
    flex:1;
    padding-left:11px;
    color:#C0C4CC;
    font-size:11px;
    border: 1px solid #C0C4CC;
    height:34px;
  }
  /*.mint-header{*/
  /*  background:rgba(236,240,245,1);*/
  /*  font-size:15px;*/
  /*  font-weight:bold;*/
  /*  color:rgba(0,0,0,1);*/
  /*  height:88px;*/
  /*}*/
  .login-banner{
    width:100%;
    height:210px;
    display:block;
  }
  .operation{
    width:100%;
    height:59px;
    background: url(../../assets/operation_bg.png) no-repeat left top;
    background-size: 100% 100%;
    font-size:15px;
    color:#000000;
    display:flex;
    align-items: center;
    justify-content: center;
    font-weight:400;
  }
  .operation span{
    display:flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height:100%;
  }


</style>
<script>
  import { Field , Header ,Button} from 'mint-ui';
  import Vue from 'vue';
  Vue.component(Header.name, Header);
  Vue.component(Field.name, Field);
  Vue.component(Button.name, Button);
  export default {
    name: 'login',
    data(){
      return  {
          email:'',
        password:'',
        code:'',
        msg_code:''
      }
    },
    methods:{

    }
  }
</script>
